<template>
  <div class="background">
    <!--    <van-nav-bar-->
    <!--      left-arrow-->
    <!--      title="装修施工"-->
    <!--      @click-left="$router.go(-1)"-->
    <!--    />-->

    <van-nav-bar @click-left="$router.go(-1)" :title="this.alla" left-text="" @click-right="share('weixin')" left-arrow>
      <template #right>
        <van-icon name="share-o" size="18" />
      </template>
    </van-nav-bar>


    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img width="375" height="375" class="img_tu" v-lazy="image.conUrl"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--<div v-for="item in indexfindList">-->
    <div>

      <div class="commodity-details-a">
        <van-row>
          <van-col span="18" style="text-align: left">
            <p style="font-weight: bolder;margin-bottom: 0.5rem">{{detaList.constructionName}}</p>
            <p style="display: inline-block">￥<span
              style="font-size: 1.5rem;font-weight: bolder">{{detaList.price}}</span></p>
            <p style="display: inline-block;font-size: 0.5rem;margin-left: 0.5rem">销量:<span>{{this.xiaoshoushu}}</span></p>
            <!--            <p style="display: inline-block;font-size: 0.5rem;margin-left: 0.5rem">成交次数:<span>561</span></p>-->
          </van-col>
          <van-col span="6" style="text-align: right">
            <!--            <van-icon name="share-o" size="22"/>-->
            <!--<p>分享</p>-->
            <!--            <van-button @click="fenxiang">aa</van-button>-->
          </van-col>
        </van-row>
      </div>

      <div class="commodity-details-b">
        <div class="shop_home-b">
          <van-row>
            <van-col span="18" style="text-align: left">
              <van-tag plain type="primary" color="red">店铺优惠券</van-tag>
            </van-col>
            <van-col span="6" style="text-align: right;padding-right: 0.5rem;position: relative">
              <p style="color:red;font-size: 0.9rem;display: inline-block" @click="showCoupon = true">领券
                <van-icon name="arrow" size="13" color="red"/>
              </p>
            </van-col>
          </van-row>
        </div>
      </div>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"></van-divider>
      <div>
        <van-row type="flex">
          <van-col span="5">
            <van-image width="2rem" height="2rem" src="https://i.52112.com/icon/jpg/256/20200505/76859/3243626.jpg"/>
          </van-col>
          <van-col span="19">
            <van-row class="cx">
              <van-col span="19">商家已缴纳{{detaList.balanceMoney}}元诚信金作为</van-col>
              <van-row>
                <van-col span="19">所售商品及服务的质量担保金</van-col>
              </van-row>
            </van-row>

          </van-col>
        </van-row>
      </div>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"></van-divider>
      <van-cell is-link @click="showPopup">
        <van-grid>
          <div>店铺地址: {{detaList.address}}</div>
          <!--          <div class="you_mi" align="right">1.8km</div>-->
          <!--          <div><p>营业时间: 24小时</p></div>-->
        </van-grid>
      </van-cell>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 0px' }"></van-divider>
      <!--<div>-->
      <!--<van-grid column-num="5" :border="false">-->
      <!--<van-grid-item icon="friends" text="特色服务" @click="teseButton(detaList.constructionId)"></van-grid-item>-->
      <!--<van-grid-item icon="column" text="资质荣誉"></van-grid-item>-->
      <!--<van-grid-item icon="thumb-circle" text="施工擅长" />-->
      <!--<van-grid-item icon="comment" text="案例展示" />-->
      <!--<van-grid-item icon="volume" text="服务区域" />-->
      <!--</van-grid>-->
      <!--</div>-->
      　
      <van-grid class="fiveicon" :border="false" :column-num="5">
        <van-grid-item @click="teseButton(detaList.constructionId)">
          <img src="../../image/featureserve.png" alt="">
          <p style="font-size: 0.8rem">特色服务</p>
        </van-grid-item>
        <van-grid-item @click="handleScroll('one')">
          <img src="../../image/certification.png" alt="">
          <p style="font-size: 0.8rem">资质荣誉</p>
        </van-grid-item>
        <van-grid-item @click="shanchangButton(detaList.constructionId)">
          <img src="../../image/adept.png" alt="">
          <p style="font-size: 0.8rem">施工擅长</p>
        </van-grid-item>
        <van-grid-item @click="handleScroll('two')">
          <img src="../../image/CaseShow.png" alt="">
          <p style="font-size: 0.8rem">案例展示</p>
        </van-grid-item>
        <van-grid-item @click="fuwuButton(detaList.constructionId)">
          <img src="../../image/coverage .png" alt="">
          <p style="font-size: 0.8rem">服务区域</p>
        </van-grid-item>
      </van-grid>

      <van-cell is-link @click="guige"><span style="color: rgba(113, 112, 112, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-bold;">已选</span> <span style="color: rgba(102, 102, 102, 100);
font-size: 12px;
text-align: left;
font-family: PingFangSC-regular;">选择 规格</span></van-cell>
      <div style="padding: 0rem 1rem 0rem 1rem">


        <div align="left">
          <!--          <van-row>-->
          <!--            <van-col span="24"><b><span style="color: rgba(16, 16, 16, 100);-->
          <!--font-size: 20px;-->
          <!--text-align: left;-->
          <!--font-family: SourceHanSansSC-bold;">服务</span></b></van-col>-->
          <!--          </van-row>-->
          <!--          <van-row>-->
          <!--            <van-col span="10"><span style="color: rgba(91, 91, 91, 100);-->
          <!--font-size: 16px;-->
          <!--text-align: left;-->
          <!--font-family: PingFangSC-regular;">队伍/公司名称</span></van-col>-->
          <!--            <van-col span="7" style="color: rgba(16, 16, 16, 100);-->
          <!--font-size: 14px;-->
          <!--text-align: left;-->
          <!--font-family: PingFangSC-regular;">{{detaList.supplierName}}-->
          <!--            </van-col>-->
          <!--            <van-col span="7"></van-col>-->
          <!--            <van-col span="8"></van-col>-->
          <!--          </van-row>-->
          <!--          <hr/>-->
          <!--          <van-row>-->
          <!--            <van-col span="10">队伍人数</van-col>-->
          <!--            <van-col span="7" style="color: rgba(16, 16, 16, 100);-->
          <!--font-size: 14px;-->
          <!--text-align: left;-->
          <!--font-family: PingFangSC-regular;">{{detaList.temaNumber}}-->
          <!--            </van-col>-->
          <!--            <van-col span="7"></van-col>-->
          <!--            <van-col span="8"></van-col>-->
          <!--          </van-row>-->
          <!--          <hr/>-->
          <van-row >
            <van-col span="5">手机号</van-col>
            <van-col span="12" style="color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;">{{detaList.phoneNumber}}
            </van-col>
            <!-- <van-col span="7"></van-col> -->
            <!-- <van-col span="8"></van-col> -->
          </van-row>
          <hr/>

          <van-row style="display:flex;flex-direction: column;line-height:2rem">
            <van-col span="5">简介</van-col>
            <van-col span="19" style="color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;">{{detaList.descript}}
            </van-col>

          </van-row>
          <hr/>




          <van-row>

          </van-row>
          <van-row>
            <van-col span="24">

            </van-col>
          </van-row>
          <van-row>

          </van-row>
          <van-row>
            <van-col span="24">

            </van-col>
          </van-row>
        </div>
      </div>
      <van-row id="two">
        <van-col span="24">
          <van-cell is-link @click="anliButton(index.constructionId)">
            <!--<van-cell is-link :to="'/DecorateACase'">-->
            <!--<b>施工案例</b> （12） <span align="left">查看全部</span> -->
            <van-row>
              <van-col span="6"><b>施工案例</b></van-col>
              <van-col span="3"></van-col>
              <van-col span="3"></van-col>
              <van-col span="6"></van-col>
              <van-col span="6" :click="quanbu" style="color: rgba(91, 91, 91, 100);">
                查看全部
              </van-col>
            </van-row>
          </van-cell>
        </van-col>
      </van-row>

      <div>
        <!--这里有一个BUG 就是路由跳转的时候  需要图片和文字都要获取到id进行跳转-->
        <!-- <van-grid> -->
        <van-grid-item @click="toConstruction(index.caseId,index.constructionId)">
          <!--            <van-image-->
          <!--              width="10rem"-->
          <!--              height="9rem"-->
          <!--              :src="index.casePicurl"-->
          <!--            />-->
        </van-grid-item>
        <van-grid-item @click="toConstruction(index.caseId,index.constructionId)" align="left">
          <div class="fore">
            <!--                <p style="font-size: 1.2rem">户型面积: {{index.doorArea}}㎡</p>-->
            <!--                <p style="font-size: 1.2rem">装修报价: {{index.decoratePrice}}万</p>-->
            <!--                <p style="font-size: 1.2rem">装修风格: {{index.decorStyle}} </p>-->
            <!--                <p style="font-size: 1.2rem">设计师: {{index.stylist}}</p>-->
          </div>
        </van-grid-item>
        <!-- </van-grid> -->
      </div>

      <!--<div style="padding: 0rem 0.5rem 0rem 0.5rem">-->


      <div id="one" style="padding-bottom: 10%" align="left">
        <van-row>
          <van-col span="1"></van-col>
          <van-col span="23"><b>资质荣誉</b></van-col>
        </van-row>

        <van-row>
          <van-col span="1"></van-col>
          <van-col span="23" style="color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;margin-top:10px">营业执照
          </van-col>
          <div class="image-div">
            <van-swipe @change="onChange1" class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="item in RongOne">
                <van-image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">{{ current1 + 1 }}/{{RongOne.length}}</div>
              </template>
            </van-swipe>
          </div>
        </van-row>

        <van-row>
          <van-col span="1"></van-col>
          <van-col span="23" style="color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;margin-top:10px">施工资质
          </van-col>
          <div class="image-div">
            <van-swipe @change="onChange2" class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="item in RongTwo">
                <van-image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">{{ current2 + 1 }}/{{RongTwo.length}}</div>
              </template>
            </van-swipe>
          </div>
          <!--<van-col span="24">-->
          <!--<van-swipe :loop="false" :width="250">-->
          <!--<van-swipe-item v-for="item in RongTwo">-->
          <!--<van-image-->
          <!--width="12rem"-->
          <!--height="11rem"-->
          <!--fit="contain"-->
          <!--style="display: inline-block;padding: 0 5px"-->
          <!--:src="item.conUrl"-->
          <!--/>-->
          <!--</van-swipe-item>-->
          <!--</van-swipe>-->
          <!--&lt;!&ndash;<person-scrollsg></person-scrollsg>&ndash;&gt;-->
          <!--</van-col>-->
        </van-row>

        <van-row>
          <van-col span="1"></van-col>
          <van-col span="23" style="color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;margin-top:10px">荣誉证书
          </van-col>
          <div class="image-div">
            <van-swipe @change="onChange3" class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="item in RongThree">
                <van-image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">{{ current3 + 1 }}/{{RongThree.length}}</div>
              </template>
            </van-swipe>
          </div>
          <!--<van-col span="24">-->
          <!--<van-swipe :loop="false" :width="250">-->
          <!--<van-swipe-item v-for="item in RongThree">-->
          <!--<van-image-->
          <!--width="12rem"-->
          <!--height="11rem"-->
          <!--fit="contain"-->
          <!--style="display: inline-block;padding: 0 5px"-->
          <!--:src="item.conUrl"-->
          <!--/>-->
          <!--</van-swipe-item>-->
          <!--</van-swipe>-->
          <!--&lt;!&ndash;<person-scrollzs></person-scrollzs>&ndash;&gt;-->
          <!--</van-col>-->
        </van-row>
      </div>
      <!--</div>-->

      <van-popup v-model="showCoupon" round position="bottom" closeable :style="{ height: '70%' }">
        <div class="container">
          <h1 style="color: red;font-size: 18px">优惠卷</h1>
          <div class="coupon-list">
            <div class="sawtooth-bor item" v-for="coupon in 2">
              <div class="pt10 discount" style="padding-top: 10px;">
                <div class="fs12">awdawd</div>
                <div class="fs12">满100减2</div>
                <div class="fs12">有效期2020-9-9 - 2020-10-9</div>
              </div>
              <div class="textc receive">立即领取</div>
            </div>
          </div>
        </div>
      </van-popup>

    </div>

    <van-goods-action>
      <van-goods-action-icon style="width: 8rem" icon="phone-circle-o" text="电话咨询">
        <a :href="'tel:' + detaList.phoneNumber" rel="external nofollow" ><span style="color: black">电话咨询</span>  </a>
      </van-goods-action-icon>
      <van-goods-action-button type="danger" text="立即购买" @click="purchase"/>
    </van-goods-action>

    <!--<van-goods-action>-->
    <!--<van-goods-action-button icon="phone-circle-o" text="电话服务" />-->
    <!---->
    <!--</van-goods-action>-->
    <van-sku
      align="left"
      v-model="show"
      :sku="sku"
      :goods="goods_info"
      :goods-id="goods_id"
      :hide-stock="sku.hide_stock"
      :quota-used="quota_used"
      :show-add-cart-btn="false"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="initialSku"
      disable-stepper-input
      :close-on-click-overlay="closeOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"/>
  </div>
</template>

<script>
// import { selectProductById,selectProductLableByProId } from '@/api/commodity/shop_product.js'
import {findAllList,findAllByIdCon} from "@/api/constructionTeam/conlabel";
import {findAllListCase, findAllCaseById, getCaseId, getId} from "@/api/constructionTeam/caseinfo";
import {
  findAllListBuilding,
  findAllById,
  findAllListDetails,
  getDetailsId,
  selectCpiUrl
} from "@/api/constructionTeam/building";
import {instalmentadd} from "@/api/customer/instalment";
import {Toast} from 'vant';
import {findAllRongIdOne, findAllRongIdTwo, findAllRongIdThree, findAllRongIdTwoen} from "@/api/commodity/qualifipic";
import {Swipe, SwipeItem} from 'vant';
import wx from 'weixin-js-sdk';
import axios from 'axios'
import {getSignature, getAccessTokenAndJsapi} from "@/api/fenxiang";


export default {
  name: "ShopDetails",
  components: {
    PersonScrollsg: () => import("@/components/building/personScrollsg.vue"),
    PersonScrollzs: () => import("@/components/building/personScrollzs.vue"),
    PersonScrollzz: () => import("@/components/building/personScrollzz.vue"),
  },
  data() {
    return {
      alla:'',
      pricenum: '',
      instalmentIdnum: '',
      form: {
        numpice: '',
        numconstructionId: '',
        numinstalmentState: '',
      },
      show: false,
      caseId: '',
      // indexfindList:[],
      typeOptions: [],
      defaultDictType: "",
      queryparams: {
        pageNum: 1,
        pageSize: 10
      },
      careparams: {
        pageNum: 1,
        pageSize: 10
      },
      goods_id: '',
      closeOnClickOverlay: true,  //点击空白处关闭购物框
      showShare: false,
      // quota: 1, //限购数量 库存旁边显示限购数
      quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      goods_info: {
        title: '',
        picture: ''  //图片这个我有点混乱
      },
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '规格',
            k_s: 's1',
            v: [],
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: '',  //？？
        stock_num: 1, // 商品总库存？？
        none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },
      initialSku: {
        // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
        // 值：skuValueId（规格值 id）
        s1: '1',
        // 初始选中数量
        selectedNum: 1,
      },
      // 查看店铺优惠券
      showCoupon: false,

      detaList: Array,


      images: [
        // 'https://img.yzcdn.cn/vant/apple-1.jpg',
        // 'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],

      nav_list: [
        //导航数据
        {
          title: "特色服务",
          icon: "photo-fail",
          path: "Introduction",

        },
        {
          title: "资质荣誉",
          icon: "photo-fail",
          path: "my_index",
        },
        {
          title: "施工擅长",
          icon: "photo-fail",
          path: "my_index",
        },
        {
          title: "案例展示",
          icon: "photo-fail",
          path: "my_index",
        },
        {
          title: "服务区域",
          icon: "photo-fail",
          path: "inspection_index",
        }
      ],
      constructionId: Number,
      supplierId: '',
      construction: Object,
      labelQuantity:9999,
      RongOne: [],
      RongTwo: [],
      RongThree: [],
      queryRong: {
        constructionIdsnum: '',
      },
      stat:'',
      //轮播当前页
      current1: 0,
      current2: 0,
      current3: 0,
      index: Array,
      xiaoshoushu:'',

      buttons: [{
        title: '我的好友',
        extra: {
          scene: 'WXSceneSession'
        }
      },
        {
          title: '朋友圈',
          extra: {
            scene: 'WXSceneTimeline'
          }
        },
      ],
    }
  },
  created() {
    const constructionId = this.$route.query && this.$route.query.constructionId;
    this.stat = this.$route.query && this.$route.query.stat;
    if(this.stat ==1){
      this.alla ='建房施工'
    }else{
      this.alla ='装修施工'
    }
    this.getId(constructionId);
    this.getDetailsId(constructionId);
    this.constructionId = constructionId;
    this.getSelectCpiUrl(constructionId);


    const supplierId = parseInt(this.$route.query && this.$route.query.supplierId);
    this.supplierId = supplierId;
    this.findRongIdOne(supplierId);
    this.findRongIdTwo(supplierId);
    this.findRongIdThree(supplierId);
    // this.findRongIdTwo(supplierId);
    this.findfindAllByIdCon(constructionId);
  },

  mounted() {
    if(window.plus) {
      this.updateSerivces();
    }
  },
  methods: {


    /**
     * 获取微信分享通道
     */
    updateSerivces() {
      let _this = this;
      plus.share.getServices(function (s) {
        _this.shares = {};
        for (var i in s) {
          var t = s[i];
          _this.shares[t.id] = t;
        }
        _this.sweixin = _this.shares['weixin'];
        _this.sqq = _this.shares['qq'];
        _this.sinaweibo = _this.shares['sinaweibo'];
      }, function (e) {
        plus.nativeUI.alert('获取分享服务列表失败：' + e.message);
      });
    },
    //第三方分享
    share(a) {
      let _this = this;

      if(a == 'weixin'){
        let msg = {
          type: 'web', //分享的内容的类型
          title: '淘小建自建房平台美图太赞了,分享给你',
          content: this.detaList.constructionName,
          thumbs: [this.detaList.conUrlAll],
          href: 'http://51jhf.com/txj/#/ShopDetails?constructionId='+this.constructionId+'&supplierId='+this.supplierId+'&stat='+this.stat,
          extra: {
            scene: "WXSceneSession"
          } // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
        }
        plus.nativeUI.actionSheet({
          title: '分享到微信',
          cancel: '取消',
          buttons: _this.buttons,
        }, function (e) {
          (e.index > 0) && _this.sharePage(_this.sweixin, msg, _this.buttons[e.index - 1]);
        })
      }
    },

    /**
     * 触发分享
     */
    sharePage(srv, msg, button) {
      let _this = this;
      // plus.nativeUI.alert('分享操作：');
      if (!srv) {
        plus.nativeUI.alert('无效的分享服务！');
        return;
      }
      button && (msg.extra = button.extra);
      // 发送分享
      if (srv.authenticated) {
        // plus.nativeUI.alert('---已授权---');
        _this.doShare(srv, msg);
      } else {
        // plus.nativeUI.alert('---未授权---');
        srv.authorize(function () {
          _this.doShare(srv, msg);
        }, function (e) {
          plus.nativeUI.alert('认证授权失败：' + JSON.stringify(e));
        });
      }
    },
    /**
     * 开始分享
     */
    doShare(srv, msg) {
      let _this = this;
      srv.send(msg, function () {
        plus.nativeUI.alert('分享到"' + srv.description + '"成功！');
      }, function (e) {
        plus.nativeUI.alert('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));
      });
    },

    findfindAllByIdCon(constructionId){
      findAllByIdCon(constructionId).then(res=>{
        this.xiaoshoushu = res.data.data
      })
    },



    handleScroll(id) {
      var element = document.getElementById(id);
      element.scrollIntoView();
    },


    findRongIdOne(supplierId) {
      findAllRongIdOne(supplierId).then(res => {
        this.RongOne = res.data;
      })
    },

    findRongIdTwo(supplierId) {
      findAllRongIdTwoen(supplierId).then(res => {
        this.RongTwo = res.data;
      })
    },
    findRongIdThree(supplierId) {
      findAllRongIdThree(supplierId).then(res => {
        this.RongThree = res.data;
      })
    },

    guige(){
      this.show = true;
      findAllList(this.constructionId).then((res) => {
        for (let i = 0; i < res.data.data.length; i++) {
          this.sku.tree[0].v.push({"id": null, "name": null, "imgUrl": null});
          this.sku.tree[0].v[i].id = res.data.data[i].labelId;
          this.sku.tree[0].v[i].name = res.data.data[i].labelName;
          this.sku.tree[0].v[i].imgUrl = res.data.data[i].constructionPicInfo.conUrl;
          console.log("**"+res.data.data[i].constructionPicInfo.conUrl)
          this.sku.list.push({
            "id": null,
            "price": null,
            "discount": null,
            "s1": null,
            "goods_id": null,
            "stock_num": null
          });
          this.sku.list[i].s1 = res.data.data[i].labelId;
          this.sku.list[i].stock_num = this.labelQuantity;
          this.sku.list[i].goods_id = res.data.data[i].constructionId;
          this.sku.list[i].price = (res.data.data[i].labelPrice) * 100;
          this.goods_id = res.data.data[i].constructionId;
          this.sku.stock_num += this.labelQuantity;
        }
      })
    },
    purchase() {
      this.show = true;
      findAllList(this.constructionId).then((res) => {
        for (let i = 0; i < res.data.data.length; i++) {
          this.sku.tree[0].v.push({"id": null, "name": null, "imgUrl": null});
          this.sku.tree[0].v[i].id = res.data.data[i].labelId;
          this.sku.tree[0].v[i].name = res.data.data[i].labelName;
          this.sku.tree[0].v[i].imgUrl = res.data.data[i].constructionPicInfo.conUrl;
          console.log("**"+res.data.data[i].constructionPicInfo.conUrl)
          this.sku.list.push({
            "id": null,
            "price": null,
            "discount": null,
            "s1": null,
            "goods_id": null,
            "stock_num": null
          });
          this.sku.list[i].s1 = res.data.data[i].labelId;
          this.sku.list[i].stock_num = this.labelQuantity;
          this.sku.list[i].goods_id = res.data.data[i].constructionId;
          this.sku.list[i].price = (res.data.data[i].labelPrice) * 100;
          this.goods_id = res.data.data[i].constructionId;
          this.sku.stock_num += this.labelQuantity;
        }
      })
    },

    onBuyClicked(sku) {

      console.log("*************"+JSON.stringify(sku.selectedNum));
      var shu = parseFloat(JSON.stringify(sku.selectedSkuComb.price))/100;
      var zuizhong = shu*sku.selectedNum;

      this.form.numpice = zuizhong
      this.form.numconstructionId = sku.selectedSkuComb.s1
      this.form.numinstalmentState = Math.floor(Math.random() * 100000000000);


      instalmentadd(this.form).then(res => {
        console.log("*****this.form******" + JSON.stringify(this.form))
        this.$router.push({
          path: "/PaymentDetails",
          query: {
            // skuId: sku.selectedSkuComb.s1,
            constructionId: this.$route.query && this.$route.query.constructionId,
            selectedNum: sku.selectedNum,
            pricenum: zuizhong,
            numinstalmentState: this.form.numinstalmentState

          }
        });
      })


    },
    onAddCartClicked(sku) {
      this.$toast('add cart:' + JSON.stringify(sku));
    },


    teseButton(constructionId) {
      this.$router.push({
          path: "/Introduction",
          query: {constructionId: constructionId}
        }
      );
    },

    shanchangButton(constructionId) {
      this.$router.push({
          path: "/shanchang",
          query: {constructionId: constructionId}
        }
      );
    },

    fuwuButton(constructionId) {
      this.$router.push({
          path: "/fuwu",
          query: {constructionId: constructionId}
        }
      );
    },



    toBack() {
      this.$router.go(-1);//返回上一层
    },

    anliButton(constructionId) {
      this.$router.push({
          path: "/DecorateACase",
          query: {constructionId: constructionId}
        }
      );
    },

    // TODO: 施工案例查询
    getId(constructionId) {
      getId(constructionId).then(res => {
        this.index = res.data.data;
        console.log(res);
      })
    },

    getDetailsId(constructionId) {
      getDetailsId(constructionId).then(res => {
        this.detaList = res.data.data;
        this.goods_info.picture= res.data.data.conUrlAll;
      })
    },

    customSkuValidator() {
      console.log("************888888")
    },
    quanbu() {
      console.log("************888888")
    },

    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    showPopup() {

    },

    onEdit() {
      Toast('编辑');
    },
    //施工队图片的轮播
    getSelectCpiUrl(constructionId) {
      selectCpiUrl(constructionId).then((res) => {
        this.images = res.data.data;
      })
    },
    //施工案例详情
    toConstruction(caseId) {
      this.$router.push({path: "/CaseDetails", query: {constructionId: this.constructionId, caseId: caseId}});
    },
    //轮播点击
    onChange1(index) {
      this.current1 = index;
    },
    onChange2(index) {
      this.current2 = index;
    },
    onChange3(index) {
      this.current3 = index;
    },

  }

}
</script>

<style scoped>
.commodity-details-a {
  font-family: PingFangSC-regular;
}

.cx {

  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.fiveicon {
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.fore p {
  /*margin-right: 80px;*/
}

.fiveicon img {
  width: 45px;
  height: 45px;

}

.commodity-details-a {
  padding: 0.5rem 1rem;
}

.commodity-details-a p {
  font-size: 0.8rem;
}

.commodity-details-b {
  padding: 0 1rem;
}

.sku-container {
  display: none;
}

.s-ctn {
  float: left;
  border: 1px solid red;
}

/*.img_tu {*/
/*  width: 100%;*/
/*  height: 20rem;*/
/*}*/

.demo-nav {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 3.2rem;
  background-color: #fff;
}

.demo-nav__title {
  font-weight: 350;
  font-size: 1.2rem;
  text-transform: capitalize;
}

.demo-nav__back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.shopdet {
  padding: 0.6rem;
}

.content {
  padding: 16px 16px 260px;
}


.container {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding-top: 18px;
}

.coupon-list {
  width: 370px;
  margin: 0 auto;
}

.coupon-list .item:first-child {
  margin-top: 20px;
}

.coupon-list .item {
  width: 370px;
  height: 90px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

/* 第一个 */
.sawtooth-bor {
  display: flex;
  color: #fff;
  padding-left: 0.5rem;
  box-sizing: border-box;
  /* 画出一个半径为8rpx的透明的圆，透明圆以外都是#ffb937颜色 */
  background: radial-gradient(transparent 0, transparent 8px, #F35C3B 8px);
  /* 截取上面生成的渐变图的一部分，相当于截取30rpx的正方形中有一个直径10px的透明圆点 */
  background-size: 30px 28px;
  /* 根据优惠券div大小进行微调 */
  background-position: 16px 0px;
  background-color: #fff;
  position: relative;
}

.sawtooth-bor:before {
  content: ' ';
  display: block;
  /* 用相同的颜色覆盖 */
  background-color: #F35C3B;
  /* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
  position: absolute;
  top: 0;
  bottom: 0;
  /* 为锯齿保留的距离 */
  left: 20px;
  right: 20px;
  z-index: -1;
}

.discount {
  border-right: 2px dashed #f5f5f5;
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  background-color: #F35C3B;
}

.receive {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffb937;
}

.image-div {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 2%;
  width: 95%;
  height: 30%;
  display: inline-block;
}

.custom-indicator {
  height: auto;
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 30%;
  line-height: 30%;
  text-align: center;
}

</style>
